<template>
	<view class="container">
		<!-- 第一段 -->
		<view class="one">
			<view class="top-layer">
				<!-- 方向箭头 -->
				<!-- <view class="arrup-main">
					<image v-if="position!='bottom'" src="@/static/images/bus/arrow_down.png" mode=""></image>
					<image v-if="position=='bottom'" src="@/static/images/bus/arrow_up.png" mode=""></image>
				</view> -->
				
				<!-- 线路信息 -->
				<view class="line-information-box">
					<view class="start-stop-station">
						<view class="station home-font-main-34">
							<text class="bus-direction">方向</text>
							<text class="start-station">{{lineBascInfo.startStationName | handleStationName}}</text>
							<image src="/static/images/bus/direction.png"></image>
							<text class="stop-station">{{lineBascInfo.endStationName | handleStationName}}</text>
						</view>
						<!-- <view class="reversing-button home-font-main-34" @click="changeDirection"
							v-if="lineBascInfo.drivingDirection != 3">
							<image src="/static/images/bus/ex_dir.png"></image>
							<text>换向</text>
						</view> -->
					</view>
					<view class="time-list-box font-color-weak-28">
						<view class="time-list">
							<view class="time-icon time-shou">首</view>
							<view class="">{{lineBascInfo.firstTime == null?'未知':lineBascInfo.firstTime}}</view>
						</view>
						<view class="time-list">
							<view class="time-icon time-mo">末</view>
							<view class="">{{lineBascInfo.lastTime == null?'未知':lineBascInfo.lastTime}}</view>
						</view>
						<view class="time-list" v-if="lineBascInfo.ticketPrice !== null && lineBascInfo.ticketPrice !== 0">
							<view class="iconfont icon-jiage"></view>票价:
							<view>{{lineBascInfo.ticketPrice}}元</view>
						</view>
						<!-- <text>首{{lineBascInfo.firstTime}} 末{{lineBascInfo.lastTime}}</text> -->
					</view>
					<view class="distance-price font-color-weak-28">
						<text class="distance">全程:{{lineBascInfo.totalMileage}}公里</text>
						<!-- <text class="price">票价:{{lineBascInfo.ticketPrice}}元</text> -->
					</view>
				</view>

				
			</view>
			
			<!-- 实时公交信息 -->
			<view class="card-panel">
				<view class="station-name font-color-weak-28">
					距<text>{{selectStation.stationName}}</text>最近{{effectiveCarList.length > 2 ? 2 : effectiveCarList.length}}班：
				</view>
				<view class="bus-list">
			
					<!-- <view class="bus-list-item">
						<view class="top">
							<image class="gif-img" src="/static/images/bus/an_realtime.gif"></image>
							<view class="time-box"><text class="time-value">20</text>分钟</view>
						</view>
						<view class="bottm">
							<text class="staion-num">13站·</text>
							<text class="distance">2公里</text>
						</view>
					</view>
					<view class="bus-list-item">
						<view class="single-line-tips">
							已到站
						</view>
					</view> -->
			
					<block v-for="(busItem,busIndex) in effectiveCarList" :key="busIndex">
						<view class="bus-list-item" v-if="busIndex < 2 && busItem.targetStationDistance >= 30">
							<view class="top">
								<image class="gif-img" src="/static/images/bus/an_realtime.gif"></image>
								<view class="time-box">
									<text class="time-value" v-if="busItem.targetStationDistance > 400"><text class="time-value">{{busItem.targetStationCount}}</text>站</text>
									<text class="time-value" v-else>即将到站</text>
								</view>
							</view>
							<view class="bottm">
								<text class="staion-num" v-if="busItem.targetStationTime>0">{{busItem.targetStationTime}}</text>
								<text v-else>小于<text class="staion-num">1</text></text>分钟<text style="margin: 0rpx 6rpx;"> . </text>
								<text class="distance">{{busItem.targetStationDistance | distanceFormat}}</text>
							</view>
						</view>
						
						<view class="bus-list-item" v-if="busIndex < 2 && busItem.targetStationDistance < 30">
							<view class="single-line-tips">
								已到站
							</view>
						</view>
					</block>
			
					<!-- 没有车辆时提示 -->
					<view class="nobus-box" v-show="noBusData">
						<view class="tips-text">
							等待首站发车
						</view>
					</view>
			
				</view>
			</view>

			<!-- 公交图示 -->
			<scroll-view class="bus-station-list" 
			
			:scroll-x="true" :scroll-into-view="scrollLeft" :scroll-with-animation="true">
				<block  v-for="(item,index) in stationsList">
					<view class="bus-station-list-item" :id="'bus_'+index"
						:key="index">
						<!-- 站点 -->
						<view class="station-info">
							<!-- 车 -->
							<!-- <view class="bus-image-box" v-if="index == 5">
								<text class="bus-num">2辆</text>
								<image class="bus-image" src="/static/images/bus/bus_icon.png"></image>
							</view> -->
							<block v-for="(busItem,busIndex) in carList" :key="busIndex">
								<!-- v-if="busItem.nextNo-1 == item.stationNo && busItem.nextStationDistance<10" -->
								<view class="bus-image-box" v-if="test(item,busItem)">
									<!-- <text class="bus-num">2辆</text> -->
									<!-- <text class="bus-num">{{busItem.busNum}}</text> -->
									<image class="bus-image" src="/static/images/bus/bus_icon.png"></image>
								</view>
							</block>


							<!-- 中间点 -->
							<view class="status-bg">
								<!-- 起点 -->
								<image class="station-image start-image" v-if="index == 0"
									src="/static/images/bus/qi5.png" style="width: 40rpx;height: 40rpx;"></image>
								<!-- 终点 -->
								<image class="station-image stop-image" v-else-if="stationsList.length-1 == index"
									src="/static/images/bus/zhong.png" style="width: 40rpx;height: 40rpx;"></image>
								<!-- 选中 -->
								<image class="station-image right_arrow" v-else-if="index == selectStationIndex"
									src="/static/images/bus/right_arrow.png"></image>
								<!-- 白色箭头 -->
								<image class="station-image white_arrow" v-else
									src="/static/images/bus/white_arrow.png"></image>
							</view>

							<!-- 底部站名 -->
							<view class="station-name" @click="changeStation(index)">
								<view :class="{'select-active' : index == selectStationIndex}">{{item.stationName | handleStationName}}
								</view>
								<view class="tag" v-if="item.stationName == stationName">
									离我最近
								</view>
							</view>
						</view>
						<!-- 中间线 -->
						<view class="line-info" v-if="stationsList.length-1 > index">
							<!-- <view class="bus-image-box" v-if="index == 9">
								<text class="bus-num">2辆</text>
								<image class="bus-image" src="/static/images/bus/bus_icon.png"></image>
							</view> -->

							<block v-for="(busItem,busIndex) in carList" :key="busIndex">
								<view class="bus-image-box" v-if="test1(item,busItem)">
									<!-- <text class="bus-num">2辆</text> -->
									<!-- <text class="bus-num">{{busItem.busNum}}</text> -->
									<image class="bus-image" src="/static/images/bus/bus_icon.png"></image>
								</view>
							</block>

							<view class="line"></view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		
		<!-- 底部 -->
		<view class="footer-box" :style="'bottom:'+((adData&&adData.is_show)?'130px':'40px')">
			<view class="footer-btn-list" @click.stop="changeDirection" 
			v-if="lineBascInfo.drivingDirection != 3">
				<view class="iconfont icon-huanxiang"></view>
				<view class="">换向</view>
			</view>
			<view class="footer-btn-list" @click.stop="exchange">
				<view class="iconfont icon-ditu"></view>
				<view class="">地图</view>
			</view>
			<view class="footer-btn-list" @click.stop="refreshHandel">
				<view class="iconfont icon-shuaxin"></view>
				<view class="">刷新</view>
			</view>
			<view class="footer-btn-list" @click.stop="changeCollect">
				<view v-if="!isCollect" class="iconfont icon-shoucang"></view>
				<view v-else-if="isCollect" class="iconfont icon-yishoucang"></view>
				<view class="">{{isCollect?'已收藏':'收藏'}}</view>
			</view>
		</view>
		<!-- <view class="bg-bottom-box">
			<image class="bg-bottom" :src="$Common.imgUrl('/bus/bus_index/bus_bg_details.png')"></image>
		</view> -->
		<!-- #ifdef MP-WEIXIN  -->

		<view  v-if="adData&&adData.is_show" class="ad-box" >
			<ad v-if="adData.type==1" :unit-id="adData.banner_id" :ad-intervals="30"></ad>
			<view v-if="adData.type==2" @click="goApp" class="diy-ad display-flex display-flex-justify-center">
				<image :src="adData.image" mode=""></image>
			</view>
			<view v-if="adData.type==3" @click="goselfApp" class="diy-ad display-flex display-flex-justify-center">
				<image :src="adData.image" mode=""></image>
			</view>
			<view v-if="adData.type==4">
				<ad v-if="adData.b_type==2" adpid="1128613343" unit-id="adunit-44a2d05a5ce645a4" :ad-intervals="30"></ad>
				<sx-banner  v-if="adData.b_type==1" :unitId="adData.banner_id"></sx-banner>
				
				<sx-cust  v-if="adData.b_type==3" :unitId="adData.cust_id"></sx-cust>
				
				<ad-interstitial v-if="adData.c_type==2"  ref="adinterstitial" @load="onload"   :adpid="1866657604" :loadnext="true" >             </ad-interstitial> 
				<sx-cp v-if="adData.c_type==1"  :unitId="adData.cp_id" ></sx-cp>
			</view>
		</view>
		<!-- #endif -->
	
	</view>
</template>


<script>
	import {
		getBusAd
	} from '@/api/api.js';
	export default {
		data() {
			return {
				source:1,//1公交站下点击线路，2搜索页，3收藏页
				// 头部
				background: {
					background: '#fff'
				},
				// 当前位置经纬度-搜索公交线路页进详情使用
				curLocation: {
					latitude: '',
					longitude: ''
				},

				// 地图
				latitude: 26.635865,
				longitude: 106.646815,
				showLocation: true,
				scale: 14, //地图缩放级别
				mapHeight: '30vh',
				animationData: '', //动画

				drawerTop: 150, //滑动时距离顶部的距离
				viewPageTop: 0, //滑动的div距离顶部的距离

				screenHeight: 0, //设备高
				topLayerHeight: 0, //顶层显示元素高
				centerLayerHeight: 0, //中间位置显示元素高
				footerHeight: 0, //底部操作面板的高
				statusBarHeight: 0, //状态栏高

				position: 'center', //层的位置，center中间，top顶上，bottom底部
				scrollLeft: 'bus_0', //底部选中站点滚动至可视区域

				touchStartX: 0, // 触屏起始点x  
				touchStartY: 0, // 触屏起始点y  


				lineId: null, //线路id
				segmentId:'',//线路id，单程id
				drivingDirection: 1,//行驶方向 1.上行  2.下行 3.环形
				isCollect: false,//是否收藏
				collectId:'',//收藏id
				
				stationName: '', //站点名
				lineRawData: {}, //线路原始数据
				realBusList: [], //实时原始公交数据

				lineBascInfo: {
					drivingDirection: 1, //行驶方向 1.上行  2.下行 3.环形
					lineName: '', //线路名
					startStationName: '起始站', //起点站
					endStationName: '终点站', //终点站
					firstTime: '6:30', //首班发车时间
					lastTime: '22:00', //末班发车时间
					ticketPrice: '2', //票价
					totalMileage: '9.6' //线路全程距离
				},

				stationsList: [], //站点列表
				selectStation: {}, //选中的站点
				selectStationIndex: 1, //选中的站点索引


				carList: [], //车辆列表
				effectiveCarList: [], //未过目标站点的列表
				noBusData: false,


				markers: [], //所有标注

				stationMarkers: [], //站点标注
				carMarkers: [], //车辆标注
				selectStationMarkers: [], //选中站点标注，只能选中一个

				points: [], //线路点
				polyline: [], //线路

				setInterName: null, //定时器对象
				adData: null
			};
		},
		filters: {
			distanceFormat(val) {
				if (val < 1000) {
					return val.toFixed(0) + '米';
				} else {
					let distance = val / 1000;
					return distance.toFixed(1) + '公里';
				}
			},
			// 站点名字过长，显示首尾内容，中间省略号显示
			handleStationName(value){
				let name = value;
				if(name.length > 9){
					let str1 = name.substring(0,5);
					let str2 = name.substring(name.length - 3);
					name = str1+'...'+str2;
				}
				return name
			}
		},
		watch: {
			selectStationIndex() { //站点列表滚动中心
				if (this.selectStationIndex <= 3) {
					this.scrollLeft = 'bus_0';
				} else if (parseInt(this.stationsList.length - 3) <= this.selectStationIndex) {
					this.scrollLeft = 'bus_' + this.selectStationIndex;
				} else {
					this.scrollLeft = 'bus_' + parseInt(this.selectStationIndex - 3);
				}
			}
		},
		components: {
			
		},
		onLoad(option) {
			// console.log(JSON.stringify(option));
			// var option = {"source":"1","stationId":"undefined","stationName":"喷水池","lineId":"01000000000303001003","drivingDirection":"1"};
			// var option = {"source":"1","stationId":"undefined","stationName":"市级行政中心","lineId":"06000000004603005041","drivingDirection":"3"};
			
			this.lineId = option.lineId;
			this.source = option.source;
			this.drivingDirection = option.drivingDirection;
			if (this.source == 1) {
				this.stationId = parseInt(option.stationId);
				this.stationName = decodeURIComponent(option.stationName);
			} else {
				// 搜索线路/收藏
				this.curLocation = uni.getStorageSync('getData');
			}
			this.getBusAd()
			this.getLineDetails();
			
		},
		onShow() {
			let that = this;
			// 定时获取实时数据
			this.setInterName = setInterval(() => {
				if(that.selectStation.stationId !== undefined
				&& that.selectStation.stationId !== null){
					that.getRealBus();
				}
			}, 15000)
		},
		onUnload() {
			clearInterval(this.setInterName);
		},
		onHide() {
			clearInterval(this.setInterName);
		},
		methods: {
			
			
			getLineDetails() { // 线路信息
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				this.$request({
					url: this.$API.getLineDetails,
					data: {
						"lineId": that.lineId
					},
					header: header,
					isShowLoading: true,
					lodingText: '加载中...',
					timeout: 30000
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.lineRawData = res.data;
						
						if (that.source == 1) {
							// 先确定线路方向
							var segmentsList = res.data.segments;
							var segments = {};
							for(let i=0;i<segmentsList.length;i++){
								if(that.drivingDirection == segmentsList[i].drivingDirection){
									segments = res.data.segments[i];
									that.stationsList = segments.stations;
								}
							}
							
							// 判断当前线路方向里面是否有目标站点
							let isHaveTargetStation = false;
							that.stationsList.forEach((val,index)=>{
								// 有相同站点
								if(val.stationName == that.stationName){
									that.selectStationIndex = index;
									isHaveTargetStation = true;
									that.selectStation = val;
								}
							})
							// 无相同站点
							if(!isHaveTargetStation){
								that.selectStation = that.calcStations(segments);
							}
							// 地图线路--方向标识
							that.lineBascInfo.drivingDirection = segments.drivingDirection; //方向标识
							// 处理线路数据
							that.initLineBascInfo();
							
						} else { //搜索线路，无站点信息，循环判断最近站点
							// console.log(res.data.segments[0]);
							var recentStation = {};
							var segmentsList = res.data.segments;
							var segments = {};
							for(let i=0;i<segmentsList.length;i++){
								if(that.drivingDirection == segmentsList[i].drivingDirection){
									segments = res.data.segments[i];
								}
							}
							
							// 最近站点信息
							that.selectStation = that.calcStations(segments);
							// console.log(JSON.stringify(segments.stations));
							// 地图线路--方向标识
							that.lineBascInfo.drivingDirection = segments.drivingDirection;
							that.initLineBascInfo();
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			getRealBus(isShowLoading) { //获取实时公交信息
				if(isShowLoading !== true){
					isShowLoading = false;
				}
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				this.$request({
					url: this.$API.busInfo,
					data: {
						"lineId": that.lineId,
						"stationId": that.selectStation.stationId
					},
					header: header,
					isShowLoading:isShowLoading
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.realBusList = res.data;
						this.filterBusData();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},

			filterBusData() { // 过滤公交车辆实时数据
				let that = this;
				that.carList = [];
				that.effectiveCarList = [];
				that.carMarkers = [];
				
				this.realBusList.forEach(val => {
					if (that.lineBascInfo.drivingDirection == "3") { //环线
						that.carList.push(val);
						
						
						if (val.targetStationCount >= 0) { //在目标站点前的车辆
						
							// 到站时间计算
							let speed = val.speed.toFixed(0);
							let targetStationDistance = val.targetStationDistance.toFixed(0);
							
							if(speed>0 && targetStationDistance>0){
								let time = targetStationDistance/speed;
								let timeSeconds = time.toFixed(0) / 60;
								val.targetStationTime = timeSeconds.toFixed(0);
							}					
							that.effectiveCarList.push(val)
							
							let calloutContent = ''
							
							if (targetStationDistance < 1000) {
								if (targetStationDistance < 30) {
									calloutContent = '已抵达'+that.selectStation.stationName;
								}else{
									calloutContent = targetStationDistance + '米后抵达'+that.selectStation.stationName;
								}
								
							} else {
								let distance = targetStationDistance / 1000;
								calloutContent = distance.toFixed(1) + '公里后抵达'+that.selectStation.stationName;
							}
							
						
						}else{
							
						}
						
					} else if (val.drivingDirection == that.lineBascInfo.drivingDirection) { //过滤出同向数据
						that.carList.push(val);


						if (val.targetStationCount >= 0) { //在目标站点前的车辆
							
							// 到站时间计算
							let speed = val.speed.toFixed(0);
							let targetStationDistance = val.targetStationDistance.toFixed(0);
							
							if(speed>0 && targetStationDistance>0){
								let time = targetStationDistance/speed;
								let timeSeconds = time.toFixed(0) / 60;
								val.targetStationTime = timeSeconds.toFixed(0);
							}					
							that.effectiveCarList.push(val)
							
							let calloutContent = ''
							
							if (targetStationDistance < 1000) {
								if (targetStationDistance < 30) {
									calloutContent = '已抵达'+that.selectStation.stationName;
								}else{
									calloutContent = targetStationDistance + '米后抵达'+that.selectStation.stationName;
								}
								
							} else {
								let distance = targetStationDistance / 1000;
								calloutContent = distance.toFixed(1) + '公里后抵达'+that.selectStation.stationName;
							}
						}else{
							
						}
						
					}
				})
				// 先用判断距离目标站点还有多少站判断排序
				that.effectiveCarList = that.effectiveCarList.sort(that.compare('targetStationCount'));
				// 再用距离目标站点-距离远近排序
				that.effectiveCarList = that.effectiveCarList.sort(that.compare('targetStationDistance'));
				that.effectiveCarList.length == 0 ? that.noBusData = true : that.noBusData = false;
			},
			compare(property) { //公交排序
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value1 - value2;
				}
			},

			initLineBascInfo() { //初始化线路基本信息
				// 当前方向线路
				let that = this;
				let lineArr = this.lineRawData.segments;
				// console.log(lineArr);
				let line = null;
				for (let i = 0; i < lineArr.length; i++) {
					if (lineArr[i].drivingDirection == that.lineBascInfo.drivingDirection) {
						line = lineArr[i]
					}
				}

				// console.log(line);
				this.segmentId = line.segmentId;//单程线路id
				this.queryIsCollect();//获取是否收藏

				this.lineBascInfo.lineName = this.lineRawData.lineName
				uni.setNavigationBarTitle({
					title:this.lineBascInfo.lineName
				})
				this.lineBascInfo.firstTime = line.firstTime;
				this.lineBascInfo.lastTime = line.lastTime;
				this.lineBascInfo.ticketPrice = line.ticketPrice;

				//线路全程长度米转为公里 
				let totalMileage = line.totalMileage / 1000;
				this.lineBascInfo.totalMileage = totalMileage.toFixed(1);

				this.lineBascInfo.startStationName = line.stations[0].stationName;
				this.lineBascInfo.endStationName = line.stations[line.stations.length - 1].stationName;

				this.stationsList = line.stations;

				this.latitude = this.selectStation.latitude;
				this.longitude = this.selectStation.longitude;
				
				//换向时站点选中
				let selectStationNo = '';
				this.stationsList.forEach((val,index)=>{ 
					if(val.stationName == that.selectStation.stationName){
						that.selectStationIndex = index; 
						selectStationNo = index;
					}
				}) 
				if(selectStationNo == ''){  //找不到同名站时选择离该站点最近的一个选中
					selectStationNo = this.stationsList.length-this.selectStation.stationNo;
					selectStationNo > 0 ? that.selectStationIndex = selectStationNo : that.selectStationIndex = 0;
					// that.selectStationIndex>=0?that.selectStationIndex:2;
				}

				this.selectStation = this.stationsList[this.selectStationIndex];

				if(that.selectStation.stationId !== undefined
				&& that.selectStation.stationId !== null){
					that.getRealBus();
				}
			},
			changeStation(index) { //切换站点
				// console.log(JSON.stringify(this.stations[index]));
				this.selectStationIndex = index;
				this.selectStation = this.stationsList[index];
				this.latitude = this.selectStation.latitude;
				this.longitude = this.selectStation.longitude;
				this.getRealBus();
			},
			changeDirection() { //换向
				if (this.lineBascInfo.drivingDirection == "1") {
					this.lineBascInfo.drivingDirection = "2";
					this.initLineBascInfo();
					return true;
				}

				if (this.lineBascInfo.drivingDirection == "2") {
					this.lineBascInfo.drivingDirection = "1";
					this.initLineBascInfo();
					return true;
				}

			},

			// 计算距离当前位置最近的站点
			calcStations(segments) {
				var that = this;
				var stationList1 = segments.stations;
				var recentStation = segments.stations[0];
				/** 获取最近站点 distance计算当前位置距离第一个站点距离，遍历计算每个站点距离当前位置距离 如果比distance小则替换 冒泡算法 **/
				that.stationsList = stationList1;
				var distance = that.calculateDistance(that.curLocation, recentStation);
				for (var i = 0; i < stationList1.length; i++) {
					/** 计算每个站点距离当前位置的距离 **/
					var preStation = stationList1[i];
					var itemDistance = that.calculateDistance(that.curLocation, preStation);
					if (itemDistance < distance) {
						distance = itemDistance;
						recentStation = preStation;
						that.stationId = recentStation['stationId'];
						that.stationName = recentStation['stationName'];
						that.selectStationIndex = i; //选中站点默认等于离我最近的站点
					}
				}
				return recentStation;
			},
			// 计算最近的站点距离当前坐标距离
			calculateDistance(curLocation, preStation) {
				var a = curLocation.longitude,
					r = curLocation.latitude,
					n = preStation.longitude,
					s = preStation.latitude;
				a *= .01745329251994329, r *= .01745329251994329, n *= .01745329251994329, s *= .01745329251994329;
				var i = Math.sin(a),
					u = Math.sin(r),
					o = Math.cos(a),
					c = Math.cos(r),
					l = Math.sin(n),
					f = Math.sin(s),
					h = Math.cos(n),
					m = Math.cos(s),
					v = [],
					p = [];
				v[0] = c * o, v[1] = c * i, v[2] = u, p[0] = m * h, p[1] = m * l, p[2] = f;
				var d = Math.sqrt((v[0] - p[0]) * (v[0] - p[0]) + (v[1] - p[1]) * (v[1] - p[1]) + (v[2] - p[2]) * (v[
						2] - p[2])),
					g = 12742001.5798544 * Math.asin(d / 2);
				return parseFloat(g.toFixed(3));
			},
			test(item, busItem) {
				if (busItem.nextNo - busItem.lastNo == 2 && item.stationNo == busItem.nextNo - 1) {
					// console.log(JSON.stringify(item));
					return true;
				}
				return false;
			
			},
			test1(item, busItem) {
				if (busItem.nextNo - busItem.lastNo == 1 && item.stationNo == busItem.nextNo - 1) {
					// console.log(JSON.stringify(item));
					return true;
				}
				return false;
			
			},
			// 地图
			exchange(){
				// 地图使用 nvue 页面
				uni.navigateTo({
					url: `./xr_line_map_nvue?lineId=${this.lineId}&lineName=${this.lineBascInfo.lineName}&drivingDirection=${this.lineBascInfo.drivingDirection}&selectStationIndex=${this.selectStationIndex}&selectStation=${JSON.stringify(this.selectStation)}`
				})
			},
			// 刷新
			refreshHandel(){
				this.getRealBus(true);
			},
			// 获取是否已收藏当前线路
			queryIsCollect(){
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let query = {
						openId:uni.getStorageSync('openId'),
						segmentId:that.segmentId
					};
				this.$request({
					url: this.$API.queryIsCollect,
					data: query,
					header: header,
					isShowLoading: true
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						if(res.msg == '未收藏'){
							that.isCollect = false;
						}else{
							that.isCollect = true;
							that.collectId = res.data.collectId;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			changeCollect(){
				if(this.isCollect){
					this.removeCollect();
				}else{
					this.cancelCollect();
				}
			},
			// 收藏
			cancelCollect(){
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let query = {
						openId:uni.getStorageSync('openId'),
						segmentId:that.segmentId
					};
					// console.log('收藏=='+JSON.stringify(query));
					// return;
				this.$request({
					url: this.$API.addCollect,
					data: query,
					header: header,
					method: 'POST',
					isShowLoading: true
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.isCollect = true;
						that.collectId = res.data.collectId;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},
			// 取消收藏
			removeCollect(){
				let that = this;
				if(!this.$Common.isGetToken()){
					this.$Common.replaceToken();
				}
				let header = {
					"content-type": "application/json",
					"Authorization": "Bearer " + uni.getStorageSync('token')
				};
				let query = {
						lineCollect:that.collectId
					};
					// console.log('取消收藏=='+JSON.stringify(query));
				this.$request({
					url: this.$API.removeCollect,
					data: query,
					header: header,
					method: "POST",
					isShowLoading: true
				}).then(res => {
					// console.log(JSON.stringify(res));
					if (res.code == 200) {
						that.isCollect = false;
						that.collectId = '';
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(JSON.stringify(err));
				});
			},

		    getBusAd(){
				var that = this
				getBusAd().then( res => {
					that.adData = res.data
				})
			},
			onload(e) {
			  console.log('广告数据加载成功1111',e);
					
			  // setTimeout(res => {
				  this.$refs.adinterstitial.show()
			  // },3500)
			},
			goselfApp(){
				uni.navigateTo({
					url: this.adData.path,
				})
			},
			goApp(item){
				// #ifdef MP-WEIXIN
				 uni.openEmbeddedMiniProgram({
				 	appId: this.adData.appid, 
				 	path: this.adData.url,
				 	extraData: {
				 	},
				 	success(res) {
				     // 打开成功
				 	}
				 })
				 // #endif
				 // #ifdef APP-PLUS
				   //需调用plus.share.getServices获取微信分享服务对象    
				  plus.share.getServices((s) => {    
					  let sweixin = {};    
					  for (let i = 0; i < s.length; i++) {    
						  let share = s[i];    
						  if (share.id === 'weixin') {    
							  sweixin = share    
						  }    
					  }    
					  //小程序参数，必填    
					  let WeixinMiniProgramOptions = {    
						  id: this.adData.g_id,    
						  path: this.adData.url,//可指定打开的页面    
					  }    
					  sweixin ? sweixin.launchMiniProgram(WeixinMiniProgramOptions) : plus.nativeUI.alert(    
						  '当前环境不支持微信操作!');    
				  }, function(e) {    
					  console.log("获取分享服务列表失败：" + e.message);    
				  });  
				  // #endif
			},
			
			
		},

	}
</script>

<style lang="scss">
	.container {
		background: #E9E9E9;
		height: calc(100vh - var(--window-top));
		overflow-y: hidden;
	}

	.one {
		.top-layer {
			padding: 20rpx 40rpx;
			background: #FEFBFB;
			box-shadow: 0px 3px 3px 0px rgba(186, 182, 182, 0.75);
			position: sticky;
			// #ifdef H5
			// top: 88rpx;
			top: 0rpx;
			// #endif
			// #ifdef APP-PLUS || MP
			top: 0rpx;
			// #endif
			z-index: 10;
		}

		// 线路信息
		.line-information-box {
			// background: #fff;
			.start-stop-station {
				display: flex;
				justify-content: space-between;
				margin: 0rpx 0 6rpx;
				padding-top: 20rpx;
				.station {
					display: flex;
					align-items: center;
					.bus-direction{
						margin-right: $uni-spacing-row-base;
					}
					image {
						width: 30rpx;
						height: 12rpx;
						margin: 0 12rpx;
					}
				}

				.reversing-button {
					image {
						width: 28rpx;
						height: 24rpx;
						margin-top: auto;
						margin-bottom: auto;
					}

					text {
						margin-left: 12rpx;
						white-space: nowrap;
					}
				}
			}
			// 起始时间，结束时间，票价
			.time-list-box{
				display: flex;
				align-items: center;
				font-size: $uni-font-size-base;
				.time-list{
					display: flex;
					align-items: center;
					margin-right: $uni-spacing-row-sm;
					.time-icon{
						width: 30rpx;
						height: 35rpx;
						text-align: center;
						line-height: 35rpx;
						font-size: $uni-font-size-sm;
						color: #FFFFFF;
						border-radius: $uni-border-radius-base;
						margin-right: 10rpx;
					}
					.time-shou{
						background-color: #03B158;
					}
					.time-mo{
						background-color: #F6063E;
					}
					.icon-jiage{
						font-size: 40rpx;
						color: #FF9C15;
						margin-right: 10rpx;
					}
				}
			}
			// 路程
			.distance-price {
				margin-bottom: 4rpx;

				.distance {
					margin-right: 20rpx;
				}
			}
		}
		
	}
	
	// 实时公交信息
	.card-panel {
		// border: 1px solid black;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 4rpx 16rpx rgba(0, 0, 0, 0.1);
		margin: 40rpx 60rpx 0rpx;
		padding: 30rpx;
	
		.station-name {
			padding-bottom: 30rpx;
	
			text {
				color: #000000;
				font-size: 30rpx;
				padding: 0 6rpx;
			}
		}
	
		.bus-list {
			display: flex;
			height: 110rpx;
	
			.bus-list-item {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.top {
					width: 100%;
					display: flex;
					justify-content: center;
					margin-bottom: 10rpx;
					.gif-img {
						width: 12rpx;
						height: 24rpx;
						margin-right: 14rpx;
					}
	
					.time-box {
						color: #26A2FF;
	
						.time-value {
							font-weight: 700;
							font-size: 36rpx;
						}
					}
				}
	
				.bottom {}
				
				// 单行提示
				.single-line-tips{
					color: #26A2FF;
					// font-weight: 700;
					font-size: 40rpx;
					height: 100%;
					display: flex;
					align-items: center;
				}
	
			}
	
			.nobus-box {
				// background-color: red;
				// display: block;
				width: 100%;
				padding: 26rpx 0;
	
				.tips-text {
					// text-align: center;
					color: #26A2FF;
					font-size: 36rpx;
				}
			}
		}
	}

	// 公交图示
	/**
	去除横向滚动条
	*/
	::-webkit-scrollbar {
	    width: 0;
	    height: 0;
	    color: transparent;
	}
	.bus-station-list {
		width: 750rpx;
		height: calc(100vh - var(--window-top) - 465rpx);
		// margin-top: 20rpx;
		white-space: nowrap;

		.bus-station-list-item {
			display: inline-flex;
			width: 130rpx;
			padding-top: 76rpx;
			position: relative;

			&:first-child {
				margin-left: 50rpx;
			}

			.station-info {
				display: flex;
				flex-direction: column;
				align-items: center;

				.status-bg {
					width: 40rpx;
					height: 16rpx;
					background: #26A2FF;
					position: relative;

					// border: 1px solid red;
					.station-image {
						position: absolute;
					}

					// 白色箭头
					.white_arrow {
						top: 0;
						left: 10rpx;
						width: 14rpx;
						height: 14rpx;
						// border: 1px solid red;
					}

					// 当前站点
					.right_arrow {
						top: -6rpx;
						left: 2rpx;
						width: 30rpx;
						height: 30rpx;
						// border: 1px solid red;
					}

					.start-image {
						top: -14rpx;
						left: -2rpx;
						// left: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.stop-image {
						top: -14rpx;
						left: 0rpx;
						width: 40rpx;
						height: 40rpx;
					}

				}

				.station-name {
					position: relative;
					margin-top: 24rpx;
					writing-mode: vertical-lr;
					color: #848484;

					.select-active {
						//选中站点绑定该类
						color: #000000;
					}

					.tag {
						position: absolute;
						color: #26A2FF;
						font-size: 22rpx;
						border: 1rpx solid #26A2FF;
						border-radius: 4rpx;
						padding: 4rpx 2rpx;
						background: rgba(33, 77, 255, 0.06);
					}
				}
			}

			.line-info {
				.bus-image-box {
					margin-left: 46rpx;
				}
				
				.line {
					width: 100rpx;
					height: 16rpx;
					background: #26A2FF;
					// z-index:1;
					// position: absolute;
					// top: 36rpx;
				}
			}

			.bus-image-box {
				position: absolute;
				top: 0rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// border: 1px solid red;
				height: 70rpx;

				.bus-num {
					// margin:0rpx auto;
					color: #26A2FF;
					font-size: 12px;
					position: absolute;
					top: 0rpx;
				}

				.bus-image {
					position: absolute;
					top: 36rpx;
					width: 50rpx;
					height: 26rpx;
				}
			}

		}

	}
	
	


	.footer {
		// display: none;
		width: 100%;
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index: 1000;

		.wrap-footer {
			display: flex;
			height: 140rpx;
			background: #fefefe;
			box-shadow: inset 0 1px 0 0 rgba(211, 211, 216, .5);
			justify-content: space-around;
			align-items: center;

			.column {
				text-align: center;

				image {
					width: 46rpx;
					height: 46rpx;
					margin: 0 auto;
				}

				text {
					font-size: 22rpx;
					margin-top: 6rpx;
					color: #959595;
				}
				.btn-save{
					color: $uni-color-primary;
				}
				.unbtn-save{
					color: #959595;
				}
			}

			.btn-feedback {
				display: flex;
				flex-direction: column;
			}
		}
	}
	
	// 底部按钮
	.footer-box{
		width: 610rpx;
		margin: 0rpx auto;
		padding: $uni-spacing-col-base 0rpx;
		background-color: #FFFFFF;
		background-color: none;
		border: 1rpx solid #1296DB;
		border-radius: $uni-border-radius-base;
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		// bottom: 260rpx;
		z-index: 20;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.footer-btn-list{
			flex: 1;
			text-align: center;
			color: #1296DB;
			.iconfont{
				font-size: 44rpx;
			}
		}
	}
	// 底部背景图
	.bg-bottom-box{
		height: 360rpx;
		overflow-y: hidden;
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index: 8;
		.bg-bottom{
			width: 750rpx;
			height: 100%;
			// height: 400rpx;
			vertical-align: text-bottom;
		}
	}
	.ad-box{
		height: 120px;
		overflow-y: hidden;
		position: fixed;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		z-index: 1;
	}
	.diy-ad{
		width: 100%;
		height: 100px;
	}
	.diy-ad image{
		width: 90%;
		height: 100%;
		border-radius: 10px;
		
	}
</style>
